<template>
    <!-- 首页 -->
    <div style="height: 100%" :style="{'background-color': back}">
        <section class="btn" v-show="isAdmin">
            <!-- position : flexd -->
            <van-button size="small" @click="jumpDesk">管理工作台</van-button>
        </section>
        <section v-for="(temp, index) in data" :key="index">
            <component 
                :is="temp.temp" 
                :style="!temp.setting ?'': fmtPx(temp.setting)" 
                :tempEngine="temp" 
                >
            </component> 
        </section>
        <section v-show="isNull">
            <!-- 居中 -->
            <van-row type="flex" justify="center">
                <van-col span="17" class="isNull">
                    <span>您还没有模板，快去新建一个吧~</span>
                </van-col>
            </van-row>
            <van-row type="flex" justify="center">
                <van-button @click="openTemp" class="addBtn">
                    <span>新建模板</span>
                </van-button>
            </van-row>
        </section>
        <!-- 新建模板 -->
        <section>
            <van-dialog v-model="dialog.isShow" show-cancel-button :before-close="addTemp">
                <van-cell title="模板名称" size="large" />
                <van-field v-model="dialog.tempName" placeholder="请输入" :error-message="dialog.errMsg" />
            </van-dialog>
        </section>
    </div>
</template>
<script>
import bannerTemp   from '@/components/temp/banner'
import oneBoxTemp   from '@/components/temp/oneBox'
import twoBoxTemp   from '@/components/temp/twoBox'
import threeBoxTemp from '@/components/temp/threeBox'
import oneTwoTemp   from '@/components/temp/oneTwoBox'
import twoOneTemp   from '@/components/temp/twoOneBox'
import fourBoxTemp  from '@/components/temp/fourBox'
import noticeTemp  from '@/components/temp/notice'
import { menu_findHome, menu_save } from '@/api/menu'
import { mapGetters } from 'vuex'

export default {
    components: {
        bannerTemp,
        oneBoxTemp,
        twoBoxTemp,
        threeBoxTemp,
        oneTwoTemp,
        twoOneTemp,
        fourBoxTemp,
        noticeTemp
    },    
    data() {
        return {
            data: [],
            back: '',
            isNull: false,
            dialog: {
                isShow: false,
                tempName: '',
                errMsg: ''
            }
        }
    },
    computed: {
        ...mapGetters(['isAdmin', 'cacheTemp']),
        valueCache: {
            get(){
                return this.cacheTemp
            },
            async set(list){
                await this.$store.dispatch('updateCacheTemp', list)
            }
        }
    },
    methods: {
        fmtPx(cssObj){
            let margin = {}, padding = {}
            for (let key in cssObj.margin) {
                if (cssObj.margin.hasOwnProperty(key)) {
                    let css = cssObj.margin[key];
                    margin[key] = css + 'px'
                }
            }
            for (let key in cssObj.padding) {
                if (cssObj.padding.hasOwnProperty(key)) {
                    let css = cssObj.padding[key];
                    padding[key] = css + 'px'
                }
            }
            return {...margin, ...padding};
        },
        jumpDesk() {//跳转到工作台
            this.$router.push("tempMenu");
        },
        openTemp() {
            this.dialog = { isShow: true, tempName: '', errMsg: '' }
        },
        async addTemp(action, done) {//新建模板
            if (action === 'confirm') {
                if (!this.dialog.tempName) {
                    this.dialog.errMsg = '请输入模板名称'
                    done(false);
                    return;
                } else {
                    const {code} = await menu_save({name: this.dialog.tempName})
                    done();
                    if(code === 100){
                        this.$router.push("tempMenu");
                    }
                }
            }
            done();
        },
        async initList() {
            let {code, data} = await menu_findHome();
            if(code === 100){
                if(data.length == 0 || data[0].json.length == 0){
                    this.isNull = true;
                }else{
                    this.back = data[0].back
                    this.data = data[0].json;
                    await this.$store.dispatch('setHomeColor', data[0].back)
                }
            }
        }
    },
    created() {
        this.initList();
        this.$store.dispatch('setIsEdit', false);
    }
}
</script>
<style lang="scss" scoped>
.isNull {
    margin-top: 50%;
    font-weight: bold;
    font-size: 19px;
    color: #A1A1A1;
}

.btn {
    position: fixed;
    z-index: 200;
    right: 0;
    top: 5%;
    .van-button {
        background-color: #409EFF;
        border: 1px solid #409EFF;
        color: #FFF;
    }
}

.addBtn {
    margin-top: 10%;
    span {
        font-size: 15px;
        color: #C0C4CC;
        font-weight: bold;
    }
}
</style>
